<script src="@{'/public/javascripts/jquery-1.6.2.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script src="@{'/public/javascripts/jquery-ui-1.8.16.custom.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script src="@{'public/javascripts/i18n/grid.locale-es.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script src="@{'/public/javascripts/jquery.jqGrid.src.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script src="@{'/public/javascripts/jquery.form.js'}" type="text/javascript" charset="${_response_encoding}"></script>	

<div id="tabla_admin">

<div id="resultado_admin">
<table id="tabla"></table>
<div id="#pager"></div>
</div>

<a href="#" id="detalles">Detalle</a>

</div>

<div id="dialogInfoDetallado" style="display:none;">

<div id="tabs">
<ul>
<li><a href="#datos">Datos Personales</a></li>
<li><a href="#imagen">Imagen</a></li>
</ul>

<div id="datos" style="width:590px;height:345px;">
<div id="zonaInfoUsuario"></div>
<div id="imagenProfile">
<img id="imagenPerfil" alt="" src="" />
</div>
</div>


<div id="imagen" style="width:590px;height:345px;">

#{form action:@Administrador.subirArchivo(id,file),enctype:'multipart/form-data',id:'crudForm'}

<label>Subir imagen de Profile :</label><input type="file" name="file" id="file" />

<input type="hidden"  id="id" name="id" value="" />

<div style="text-align: center;">
<input type="submit"  value="Cargar" />
</div>

#{/form}


<div id="zonaimagen">
<img id="img" alt="" src="">
</div>

</div>


</div>

</div>

<script type="text/javascript">
	
	$(document).ready(function(){
		
		$('#tabla').jqGrid({
			url:'@{Administrador.obtenerUsuarios()}',
			datatype:'json',
			colNames:['ID','Nombre','Apellido','Codigo','Cuenta','Contrase&ntildea','Rol'],
			colModel:[
			          {name:'id',index:'id',align:'center',resizable:true},
			          {name:'nombre',index:'nombre',align:'center',resizable:true},
			          {name:'apellido',index:'apellido',align:'center',resizable:true},
			          {name:'codigo',index:'codigo',align:'center',resizable:true},
			          {name:'nombrecuenta',index:'nombrecuenta',width:210,align:'center',resizable:true},
			          {name:'contrasena',index:'contrasena',align:'center',resizable:true},
			          {name:'rol',index:'rol',align:'center',resizable:true}
			],
			rowNum:10,
			rowList:[10,20,30],
			pager:'#pager',
			viewrecords:true,
			autowidth:true,
			sortname:'id',
			sortorder:'asc',
			height:300,
			caption:'Lista de Usuarios',
			jsonReader:{
				id:'0',
				repeatitems:false
			},
			ondblClickRow:function(){
				var posicion=$('#tabla').jqGrid('getGridParam','selrow');
				$.get('@{Administrador.loadUsuarioJson(id)}',{
					id:posicion
				},function(usuario){
					var $info=
								'Nombre  :'+usuario.nombre+'<br><br>'+
								'Apellido:'+usuario.apellido+'<br><br>'+
								'Codigo  :'+usuario.codigo+'<br><br>'+
								'Cuenta  :'+usuario.nombrecuenta+'<br><br>'+
								'Contrase&ntildea:'+usuario.contrasena+'<br><br>'+
								'Rol     :'+usuario.rol+'<br><br>';
					
								
					$('#zonaInfoUsuario').html($info);
					$('#detalles').trigger('click');
					$('#id').attr('value',usuario.id);
				});
				
				var direccion='@{Administrador.getArchivo()}?id='+posicion;
				$('#img').attr('src',direccion);
				$('#imagenPerfil').attr('src',direccion);
				
			}
		});
		
		$('#informacion').trigger('click');
		$('#tabs').tabs();
		$('#datos').click(function(){
			alert('asdf');
		});
		
		$('#detalles').click(function(){
		$('#dialogInfoDetallado').dialog({
			modal:true,
			width:700,
			height:500
		});
		});
		
		
		
		$('#crudForm').ajaxForm({
			success : function(){
				var posicion=$.trim($('#tabla').jqGrid('getGridParam','selrow'));
				alert('La imagen ha sido cambiada...Actualizando');
					
				location.reload();
			},
			resetForm:true
		});
		
		
		
	
		
	});
	
</script>